![[Amazon Connect]「アプリ内、ウェブ、ビデオ通話」で問い合わせしてきた顧客情報を表示するソリューションがあったのでやってみた](https://devio2023-media.developers.io/wp-content/uploads/2023/08/amazon-connect.png)
[Amazon Connect]「アプリ内、ウェブ、ビデオ通話」で問い合わせしてきた顧客情報を表示するソリューションがあったのでやってみた
2024.04.11こんにちは、洲崎です。
Amazon Connectでは電話・チャット以外に「アプリ内・ウェブ・ビデオ通話」も利用することができます。
この機能は電話回線を使わずに音声通話・ビデオ通話が可能です。
また、料金については、「料金無料通話」と比較すると「アプリ内通話/ウェブ通話」の方が安く利用ができます。
一方、「アプリ内、ウェブ、ビデオ通話」をそのままの機能で利用すると、電話対応するのと比較して、発信元の電話番号などの情報がないため、問い合わせをしてきた顧客をすぐに特定することは困難です。
今回は「アプリ内、ウェブ、ビデオ通話」で顧客情報を表示させるソリューションがAWSより紹介されてましたのでやってみました。
ソリューションの概要
CloudFront + S3でサンプルのWebサイトを用意します。
Webサイトにあるフォームに顧客の情報を送信すると、API Gateway経由でLambdaに渡されます。
LambdaでJSON Webトークンを発行し、System Manager Parameter Storeから認証情報を取得し、Amazon Connectに渡します。
その情報をAmazon Connectのステップバイステップガイドと連係し、Amazon ConnectのAgent WorkSpaces上に表示させます。
(参考)Securely pass the customer information to agent using Amazon Connect in-app, web, and video calling
前提：AWS CDKのインストール
本ソリューションはAWS CDKでデプロイをするので、AWS CDKを利用できることが前提です。
事前にターミナルでcdk --verisonと入力し、自身の端末にインストールされているか確認します。
もしインストールされていない場合は、以下のコマンドを叩いてインストールします。
npm -g install typescript npm -g install aws-cdk
また、AWS環境にデプロイするためにcdk bootstrapを実施していなければ、実行します。
CloudFormationのスタック一覧に、「CDKToolkit」があればOKです。
AWS CDKのインストール方法の詳細については、こちらの記事も参照してください。
やってみる
AWS CDKのデプロイ
Githubから自分の端末にリポジトリのクローンを作成します。
git clone https://github.com/aws-samples/web-voice-video-calling-blog.git
クローンしたフォルダを、任意のエディタで開きます。（私はVisual Studio Codeで開きました）
Lambda関数のレイヤーをインストールします。
mkdir -p lambda-layers/jwt-layer/nodejs npm install jsonwebtoken --prefix lambda-layers/jwt-layer/nodejs npm install
AWS CLIでCDKプロジェクトをデプロイします。
cdk deploy
コマンドを実行すると、Do you wish to deploy these changes (y/n)?と表示されるので、yと入力します。
約4〜5分で、デプロイが完了しました。
Outputsの部分（API GatewayのエンドポイントとCloudFrontのURL）は控えておきます。
Deployment time: 265.82s Outputs: AcWebCallingStack.Endpointxxxxxxxx = https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/ AcWebCallingStack.websiteURL = https://xxxxxxxxxx.cloudfront.net Stack ARN: arn:aws:cloudformation:ap-northeast-1:xxxxxxxxxxxx:stack/AcWebCallingStack/xxxxxxxxx-f6dd-11ee-80f4-0eaa6d8266f1 Total time: 280.3s
マネジメントコンソールのCloudFormationのスタック一覧で、デプロイ済みであることを確認することができます。
Amazon Connect コミュニケーションウィジェット
Amazon Connect コンソールにログインし、「コミュニケーションウィジェット」を開きます。
ウィジェットの詳細で以下を入力します。
名前：ac_widget_webcalling
説明：Webおよびビデオ通話用のウィジェット
コミュニケーションのオプションで、「ウェブ通話を追加」と「動画を追加」にチェックを入れます。
ウェブ通話コンタクトフローは、一旦仮で指定するため、どれでも大丈夫です。（Sample inbound flowにしました）
「ウィジェットをカスタマイズする」ところでは、すべてデフォルトのままで次に進みます。
「ドメインとセキュリティ」のところで、ドメインはCDKデプロイ時に控えたCloudFrontのURLを入力します。
また、「新しいコミュニケーションウィジェットリクエストのためにセキュリティを追加する」のところで、「はい」を指定します。
スクリプトとセキュリティキーをそれぞれコピーして、控えておきます。
index.htmlの修正
git cloneしたフォルダにあるindex.htmlを開きます。
127行目にあるconst apiEndpointのパラメーターを、CDKデプロイの時に控えたAPIエンドポイントを入力します。
115行目と123行目の間に、コミュニケーションウィジェットで控えたスクリプトを貼り付けます。
その際、コピーしたスクリプトから「」は削除します。
ターミナルを起動し、cdk deployを実行します。
2回目は90秒ほどでデプロイが完了しました。
AcWebCallingStack Deployment time: 80.51s Outputs: AcWebCallingStack.Endpointxxxxxxxx = https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/ AcWebCallingStack.websiteURL = https://xxxxxxxxxx.cloudfront.net Stack ARN: arn:aws:cloudformation:ap-northeast-1:xxxxxxxxxxxx:stack/AcWebCallingStack/xxxxxxxxx-f6dd-11ee-80f4-0eaa6d8266f1 Total time: 90.76s
System Manager Parameter Storeの更新
マネジメントコンソールからSystem Managerを開き、パラメーターストアを開きます。
「/Blog/AcWebCalling/AmazonConnect/ConnectSecret」を開き、編集をクリックします。
直のフィールドに、コミュニケーションウィジェットの作成時に控えたセキュリティーキーを入力します。
「/Blog/AcWebCalling/AmazonConnect/WidgetId」を開き、編集をクリックします。
直のところに、コミュニケーションウィジェットで控えたスクリプトにある、Widget IDを入力します。
※Widget IDはスクリプトにある9行目の/* Widget ID */とコメントを入れているところにあります。
<script type="text/javascript">
(function(w, d, x, id){
s=d.createElement('script');
s.src='https://xxxxxxxxxxxxxxx.cloudfront.net/amazon-connect-chat-interface-client.js';
s.async=1;
s.id=id;
d.getElementsByTagName('head')[0].appendChild(s);
w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
})(window, document, 'amazon_connect', '/* Widget ID */');
amazon_connect('styles', { iconType: 'VOICE', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
amazon_connect('snippetId', 'xxxxxxxxxxxxxxxxxx=');
amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
</script>
Amazon Connect ステップバイステップガイド
Webサイトから渡された属性を確認するために、Amazon Connectのステップバイステップガイド機能を利用します。
Githubにあるac_webcalling_SBSguide_view フローをダウンロードします。
Amazon Connectコンソールで、ルーティング→フロー→フローの作成をクリックします。
右上にある矢印ボタンから、「インポート（ベータ）」をクリックし、ダウンロードしたフローをインポートします。
「保存」を押して、「公開」をクリックします。
Githubにあるac_webcalling_SBSguide_handler フローをダウンロードし、同じくフローをインポートします。
「保存」を押して、「公開」をクリックします。
ac_webcalling_SBSguide_view フローを開き、フローエディターの左下にあるARNからcontact-flow/の後ろにあるフローIDを控えます。
ac_webcalling_SBSguide_handler フローを開き、「コンタクト属性の設定」ブロックを開きます。
「DefaultFlowForAgentUI」の直を、控えたフローIDに置き換えます。
「WorkingQueue」の直に、動作確認で利用する用のキューのARNを入力します。
Amazon Connect ウィジェットフローの更新
作成したコミュニケーションウィジェットのコンタクトフローを、「ac_webcalling_SBSguide_handler」に変更します。
残りの設定はそのままで、「保存して続行」をクリックし、保存します。
Amazon Connect セキュリティプロファイル
動作確認を行うユーザーのセキュリティプロファイルを更新します。
コントロールパネル（CCP）のところで、「ビデオ通話」を有効にします。
数字とフローのところで、「ビュー」を有効にします。
エージェントアプリケーションのところで、「カスタムビュー」と「ビュー」を有効にします。
これで、設定完了です！
テスト
Amazon Connectでテストを行うユーザーで、Agent Workspacesを開いておきます。
CloudFrontのURLを叩くと、以下の画面が表示されます。
Name、Email、Messageに問い合わせ主の情報を入力します。
また、Contact Reasonはドロップダウンで指定できますので、「Open a new account」を指定します。（どれでもOKです）
Submitをクリックすると、右下にビデオ通話のアイコンが表示されるので、クリックします。
Active Call（発信状態）になります。オペレーター側で着信をとると通話可能になります。
オペレーターが通話をとると、ウェブ通話やビデオ通話を行うことが可能になります。
オペレーター側の画面には、顧客側の情報が表示されました！
清掃
git cloneしたweb-voice-video-calling-blog に移動し、「cdk destroy」を実行します。
インポートした問い合わせフロー（ac_webcalling_SBSguide_handler、ac_webcalling_SBSguide_view）をdelete-contact-flowコマンドで削除します。
最後に
「アプリ内・ウェブ・ビデオ通話」でオペレーターに顧客情報を表示させるソリューションを試してみました。
作り込めば、ウェブ通話でもパラメーターをオペレーターの画面に表示させることが可能です。
また、個人的に、属性を表示させるのに「ステップバイステップガイド」を使うのも参考になりました。
ではまた！コンサルティング部の洲崎でした。
